<!--
 * @Description: 资源管理---运维资源---数据目录
 * @Author: 魏勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2020-03-31 18:16:32
 * @LastEditors: 魏勇
 -->
<template>
    <el-row class="form-row">
        <el-col :span="6">
            <div class="form-label"><span class="required" v-show="itemObj.required">*</span>{{itemObj.label}}:</div>
        </el-col>
        <el-col :span="18" style="position: relative;" >
            <el-select v-model="itemVal" filterable  @change="changeVal"      :disabled="itemObj.disabled"   :remote-method="remoteMethod" remote  :class="inputExtClass" size="small" placeholder="可以输入关键字进行查询" style="width: 100%;">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <i v-show="this.hasRepError" class="errorFlag el-input__icon el-icon-warning" title="名称不能为空，请输入相应的值"></i>
            <span style="float: left;" v-if="itemObj.remark!=null">{{itemObj.remark}}</span>
        </el-col>
    </el-row>
</template>

<script>

    export default {
        name: "el-select-ctl",
        components: {},
        props: {
            flushFilter:{type:[String,Number],default:''},
            itemObj: {
                type: Object, default: () => {
                    return {}
                }
            }
        },
        computed: {
            itemValue(){
                return this.itemObj.value;
            },
            //输入框的扩展样式
            inputExtClass() {
                if (this.hasRepError) {
                    return 'hasRepError';
                }
                return '';
            },
            icon() {
                if (this.hasRepError) {
                    return 'el-icon-warning';
                }
                return this.itemObj.icon || '';
            },
        },
        data() {
            return {
                options:[],
                searchContent:'',
                hasRepError: false,
                errorMes: '',
                itemVal: this.itemObj.value,
            }
        },
        created() {

        },
        beforeMount(){
            this.getTenantResourceAllocate(this.itemObj["queryType"]);
        },
        mounted() {

        },
        watch: {
            disabledState(newVal){

            },
            flushFilter(newVal){
                this.getTenantResourceAllocate(this.itemObj["queryType"],this.itemObj["tenantId"],this.itemObj["tenantProductCode"]);
            },
            itemValue(newVal){
                this.itemVal=newVal+"";
            },
            itemVal(newVal) {
                this.$emit('input', newVal);
                if (newVal != null && newVal !== "") {
                    this.hasRepError = false;
                    this.validate();
                }
            }
        },
        methods: {
            //远程查询方法
            remoteMethod(queryStr){
                this.getTenantResourceAllocate(this.itemObj["queryType"],this.itemObj["tenantId"],this.itemObj["tenantProductCode"],queryStr);
            },
            //获取下拉内容
            getTenantResourceAllocate(queryType,tenantId,tenantProductCode,queryStr='') {
                this.api.getTenantResourceAllocate({tenantId:this.itemObj["tenantId"],tenantProductCode:this.itemObj["tenantProductCode"],resourceType:queryType+"",searchContent:queryStr})
                    .then(res => {
                        this.options=[];
                        res["data"].forEach(({resourceId,resourceName})=>{
                            this.options.push({
                                value: resourceId,
                                label: resourceName
                            });
                        })
                    })
                    .catch(err => {
                        console.warn(err.msg)
                    });
            },
            changeVal(val){
                this.$emit('changeVal',{id:this.itemObj.id,val})
            },
            //添加错误提示信息
            addMsgTitle(){
                this.$nextTick(()=>{
                    let els=this.$el.querySelectorAll(".el-icon-warning");
                    els.forEach((itemObj)=>{
                        itemObj.setAttribute("title",this.errorMes);
                    })
                })
            },
            validate() {
                if (this.itemObj.required && (this.itemObj.value == null || this.itemObj.value === "")) {
                    this.hasRepError = true;
                    this.errorMes = this.itemObj.label+"不能为空，请输入相应的值";
                    this.addMsgTitle();
                    return false;
                }
            },
            getErrorFlag(){
                return this.hasRepError;
            }
        }
    };
</script>
<style lang="scss">
    .el-input.el-input--small.hasRepError {
        input {
            border: 1px solid red;
        }

        .el-input__icon.el-icon-warning {
            color: red;
            cursor: pointer;
        }
    }
    .hasRepError{
        .el-input__inner{
            border: 1px solid red;
        }
    }

    .errorFlag{
        position: absolute;right:6px;top:-2px;color:red;
    }

</style>